<template>
  <el-container>
    <el-aside>
      <Tree v-model:tool="rest" v-model:meau="rest_meau"  @ChangeFather="ChangeFather" ref="update_api"></Tree>
    </el-aside>

    <template v-if="dir">
    </template>

    <template v-else>
      <el-main>
        <el-form :model="form" label-width="120px" >
          <el-button @click="CreateRestful" type="warning">创建</el-button>
          <el-form-item label="接口名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="请求地址" prop="url">
                <el-input v-model="form.url" placeholder="请输入url地址"
                          class="input-with-select">
                  <template #prepend>
                    <el-select v-model="form.method" class="address_select">
                      <el-option label="GET" value="GET" />
                      <el-option label="HEAD" value="HEAD" />
                      <el-option label="POST" value="POST" />
                      <el-option label="PUT" value="PUT" />
                      <el-option label="DELETE" value="DELETE" />
                    </el-select>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="timeout">
                <el-input v-model="form.timeout" type="number">
                  <template #prepend>
                    超时时间
                  </template>
                </el-input>
                <el-button @click="Run" type="success">提交并发送</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-tabs v-model="activeName" type="card" class="head_tabs" style="height: 400px;max-height: 400px">
            <el-tab-pane label="Query" name="query">
              <ApiTable  v-model:data="form.query"></ApiTable>
            </el-tab-pane>
            <el-tab-pane label="Body" name="body">
              <ApiTable  v-model:data="form.body"></ApiTable>
            </el-tab-pane>

            <el-tab-pane label="请求头" name="header">
              <ApiTable  v-model:data="form.header"></ApiTable>
            </el-tab-pane>

            <el-tab-pane label="前置" name="result">
              <el-form-item label="Activity form">
                <el-input v-model="form.desc" type="textarea" />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="后置" name="param">(参数)</el-tab-pane>
            <el-tab-pane label="Mock" name="mock">(参数)</el-tab-pane>
          </el-tabs>
        </el-form>

        <div>
          <el-tabs v-model="resp_active" type="card" class="head_tabs" @tab-click="handleClick" style="height: 35vh;max-height:35vh">
            <el-tab-pane label="实时响应" name="resp">
              <json-editor-vue class="editor" v-model="response"  />

            </el-tab-pane>
            <el-tab-pane label="请求头">
            </el-tab-pane>
            <el-tab-pane label="响应头" >
            </el-tab-pane>
            <el-tab-pane label="断言结果" >
            </el-tab-pane>
            <el-tab-pane label="提取结果">
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </template>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonEditorVue from 'json-editor-vue3';
import ApiTable from '@/components/common/tables/api_table.vue'
import Tree from '@/components/common/tree/tree.vue'
import {rest_meau,rest} from './restful'

const response = ref("")
const update_api = ref(null)

const activeName = ref('header')
const resp_active = ref('resp')
const dir = ref(true)
const InitForm = () =>{
  return {
    father:0,
    name:null,
    desc:null,
    url:null,
    method:null,
    timeout:null,
    body:null,
    query:null,
    header:null,
  }
}
const form = ref({
  father:0,
  name:null,
  desc:null,
  url:null,
  method:null,
  timeout:null,
  body:null,
  query:null,
  header:null,
})

const ChangeFather = async (data,create) =>{
  if (data.method==undefined){
    //此处为目录数据
    if (create) {
      form.value = await InitForm()
      form.value.father = data.id
      dir.value = false
    }
  }else{
    form.value = await {
      father:data.id,
      name:data.name,
      desc:data.desc,
      url:data.url,
      method:data.method,
      timeout:data.timeout,
      body:data.body,
      query:data.query,
      header:data.header,
    }
    dir.value = false
  }
}


const CreateRestful = async () => {
  return await rest.Create(form.value)
}

const Run = async () => {
  response.value = await rest.Run(form.value)
}
</script>

<style scoped>
.el-aside {
  width: 200px;
  border-right: 1px solid #a9a4a4;
}

.el-input {
  width: 200px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  font-family: "方正粗黑宋简体";
  padding-right:8px;
  width: 70px !important;
}
:deep(.el-tabs__header ) {
  margin: 0;
}
.input-with-select {
  width: 95%;
}

.head_tabs {
  height: 500px;
  border: 1px solid #e3dddd;
}

:deep(.el-form-item__content) {
  margin: 0 !important;
}

 :deep(.el-input-group__prepend) {
  padding: 0 8px;
}

:deep(.el-input__wrapper) {
  padding: 1px 8px;
}

:deep(.el-input-group__prepend){
  background-color: rgba(50, 54, 52, 0.7) !important;
  color: white;
}

.address_select {
  color: white;
  outline: unset;
  width: 90px;
  background-color: rgba(164, 162, 163, 0.7) !important;
  margin: 0;
}

:deep(.el-select__icon){
  color: white !important;
}

.address_select :deep(.el-input__inner) {
  color:white !important;
}

.input-with-select  :deep(.el-input-group__prepend) {
  padding: 0;
  width: 80px;
}

.editor {
  height:600px
}

</style>